<template>
        <LogoutButton></LogoutButton>
    <h3>账户余额：{{currentUserInfo.account}}元</h3>
    <!--    充值弹窗-->
    <el-button type="success"
               @click="rechargeDialogVisible = ref(true)"
    >充值</el-button>
    <el-dialog v-model="rechargeDialogVisible" title="充值">
        <el-row>
            <el-button type="success" @click="rechargeAccountCommand(6)">充值6元</el-button>
            <el-button type="success" @click="rechargeAccountCommand(30)">充值30元</el-button>
            <el-button type="success" @click="rechargeAccountCommand(68)">充值68元</el-button>
        </el-row>
        <el-divider />
        <el-row>
            <el-button type="success" @click="rechargeAccountCommand(198)">充值198元</el-button>
            <el-button type="success" @click="rechargeAccountCommand(328)">充值328元</el-button>
            <el-button type="success" @click="rechargeAccountCommand(648)">充值648元</el-button>
        </el-row>
        <el-divider />
        <span class="dialog-footer">
        <el-button @click="rechargeDialogVisible = ref(false)">取消</el-button>
        </span>
    </el-dialog>

    <div class="container">
        <h1>云平台后台管理</h1>
        <!--        重置盲盒弹窗-->
        <el-row>
            <h3>活动随机盲盒大礼包,有概率中大奖！</h3>
            <el-button type="success"
                       @click="refreshBoxDialogVisible = ref(true)"
            >重置盲盒礼包</el-button>
        </el-row>
        <el-dialog v-model="refreshBoxDialogVisible" title="重置盲盒礼包">
            <p>
                是否要花1000元重置盲盒礼包？
                重置前请开启所有盲盒，否则未开启的盲盒将会丢失！
            </p>
            <template #footer>
          <span class="dialog-footer">
            <el-button @click="refreshBoxDialogVisible = ref(false)">取消</el-button>
            <el-button type="primary" @click="refreshBox">
              确认
            </el-button>
          </span>
            </template>
        </el-dialog>
        <el-card class="box-card" v-for="item in boxItems" :key="item">
            <el-button type="primary" @click="handleOpenBox(item.id)">
                开启盲盒
            </el-button>
            <p v-if="item.isOpened">
                {{ item.prize.description }}
            </p>
            <p v-if="!item.isOpened">
                点击开启盲盒礼包！
                有概率中虚拟机实例大奖！
            </p>
        </el-card>
        <el-divider />
<!--        <el-button type="success"-->
<!--                   size="small"-->
<!--        >上传镜像</el-button>-->
        <el-row><h3>可用镜像</h3></el-row>
        <el-table :data="mirrorData" style="width: 100%">
            <el-table-column prop="id" label="镜像id"  />
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="description" label="描述" />
            <el-table-column prop="operation" label="操作">
                <template v-slot="scope">
                    <el-button type="success"
                               size="small"
                               @click="handleInstanceCreate(scope.row.id)"
                    >以此镜像新增虚拟机</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-divider />
        <el-row><h3>虚拟机实例</h3></el-row>
        <el-table :data="instanceData" style="width: 100%">
            <el-table-column prop="id" label="虚拟机id"/>
            <el-table-column prop="mirrorId" label="镜像id"/>
            <el-table-column prop="name" label="虚拟机名称"/>
            <el-table-column prop="cpu" label="CPU" />
            <el-table-column prop="memory" label="内存" />
            <el-table-column prop="storage" label="硬盘" />
            <el-table-column prop="localIp" label="内网IP" />
            <el-table-column prop="publicIp" label="公网IP" />
            <el-table-column prop="bandwidth" label="带宽" />
            <el-table-column prop="deadline" label="到期时间" />
            <el-table-column prop="operation" label="操作">
                <template v-slot="scope">
                    <el-button type="primary"
                               size="small"
                               @click="handleInstanceModify(scope.row)"
                    >修改配置</el-button>
                    <!--    续期弹窗-->
                    <el-button type="primary"
                               size="small"
                               @click="renewDialogVisible = ref(true)"
                    >续期</el-button>
                    <el-dialog v-model="renewDialogVisible" title="续期">
                        <p>
                            给id为{{scope.row.id}}的虚拟机进行续期：
                        </p>
                        <el-row>
                            <el-button type="success" @click="setSelectedDeltaTime(scope.row.id,1)">续期一个月</el-button>
                            <el-button type="success" @click="setSelectedDeltaTime(scope.row.id,3)">续期三个月</el-button>
                            <el-button type="success" @click="setSelectedDeltaTime(scope.row.id,6)">续期六个月</el-button>
                        </el-row>
                        <el-divider />
                        <el-row>
                            <el-button type="success" @click="setSelectedDeltaTime(scope.row.id,12)">续期一年</el-button>
                            <el-button type="success" @click="setSelectedDeltaTime(scope.row.id,24)">续期二年</el-button>
                            <el-button type="success" @click="setSelectedDeltaTime(scope.row.id,36)">续期三年</el-button>
                        </el-row>
                        <el-divider />
                        <span class="dialog-footer">
        <el-button @click="renewDialogVisible = ref(false)">取消</el-button>
        </span>

<!--                        续期确认弹窗-->
                        <el-dialog v-model="renewConfirmDialogVisible" title="确认续期">
                            <p>
                                将要花费{{operationCost}}元进行续期，是否继续？
                            </p>
                            <template #footer>
      <span class="dialog-footer">
        <el-button @click="renewConfirmDialogVisible = ref(false)">取消</el-button>
        <el-button type="primary" @click="renewInstanceCommand(scope.row.id,selectedDeltaTime)">
          确认
        </el-button>
      </span>
                            </template>
                        </el-dialog>
                    </el-dialog>

                    <el-button type="danger"
                               size="small"
                               @click="deleteConfirmDialogVisible = ref(true)"
                    >删除</el-button>
<!--                    删除确认弹窗-->
                    <el-dialog v-model="deleteConfirmDialogVisible" title="确认删除">
                        <p>
                            删除id为{{scope.row.id}}的虚拟机：
                            虚拟机删除后数据将会消失且无法找回，是否继续？
                        </p>
                        <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteConfirmDialogVisible = ref(false)">取消</el-button>
        <el-button type="primary" @click="handleInstanceDelete(scope.row.id)">
          确认
        </el-button>
      </span>
                        </template>
                    </el-dialog>
                </template>
            </el-table-column>
        </el-table>
    </div>
<!--    修改/创建弹窗-->
    <el-dialog v-model="instanceFormDialogVisible" title="虚拟机信息">
        <el-form :model="instanceForm">
            <el-form-item label="镜像id" >
                <el-input v-model="instanceForm.mirrorId" autocomplete="off" disabled/>
            </el-form-item>
            <el-form-item label="虚拟机名称" >
                <el-input v-model="instanceForm.instanceName"
                          autocomplete="off"
                          maxlength="8" />
            </el-form-item>
            <el-form-item label="CPU" >
                <el-input v-model="instanceForm.cpu" autocomplete="off"
                          maxlength="3"
                          oninput = "value=value.replace(/[^\d.]/g,'')"/>
            </el-form-item>
            <el-form-item label="内存" >
                <el-input v-model="instanceForm.memory" autocomplete="off"
                          maxlength="4"
                          oninput = "value=value.replace(/[^\d.]/g,'')"/>
            </el-form-item>
            <el-form-item label="硬盘" >
                <el-input v-model="instanceForm.storage" autocomplete="off"
                          maxlength="10"
                          oninput = "value=value.replace(/[^\d.]/g,'')"/>
            </el-form-item>
            <el-form-item label="内网IP" >
                <el-input v-model="instanceForm.localIp" autocomplete="off" />
            </el-form-item>
            <el-form-item label="带宽" >
                <el-input v-model="instanceForm.bandwidth" autocomplete="off"
                          maxlength="3"
                          oninput = "value=value.replace(/[^\d.]/g,'')"/>
            </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="instanceFormDialogVisible = ref(false)">取消</el-button>
        <el-button type="primary" @click="inqueryInstance()">
          确认
        </el-button>
      </span>
        </template>
    </el-dialog>
  <!--          修改/创建确认弹窗-->
    <el-dialog v-model="instanceConfirmDialogVisible" title="确认虚拟机配置">
        <p>
            本次操作将花费{{operationCost}}元进行虚拟机配置，是否继续？
        </p>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="instanceConfirmDialogVisible = ref(false)">取消</el-button>
        <el-button type="primary" @click="submitInstanceForm()">
          确认
        </el-button>
      </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">

import {ElMessage} from "element-plus";
import {activityCreate, activityOpen, activityRefreshBox} from '@/api/Activity.ts';
import {
    calculateRenew, calculateUpgrade,
    instanceCreate,
    instanceDelete,
    instanceRead,
    instanceUpdate,
    renew, upgrade
} from "@/api/CloudInstance.ts";
import {mirrorRead} from "@/api/CloudMirror.ts";
import {verify} from "@/api/Auth.ts";
import LogoutButton from "@/components/LogoutButton.vue";
import {ref} from "vue";
import {readCurrentUserInfo, rechargeAccount} from "@/api/CloudUser.ts";

export default {
    components: {LogoutButton},
    created() {
        this.verifyLogin()
        this.fetchData()
    },
    data() {
        return {
            rechargeDialogVisible:ref(false),
            refreshBoxDialogVisible:ref(false),
            renewDialogVisible:ref(false),
            renewConfirmDialogVisible:ref(false),
            deleteConfirmDialogVisible:ref(false),
            currentUserInfo:null,
            operationCost:null,
            instanceForm: {
                selectedId:"",
                mirrorId:"",
                instanceName:"",
                cpu:"",
                memory:"",
                storage:"",
                localIp:"",
                bandwidth:"",
            },
            instanceFormDialogVisible:ref(false),
            instanceConfirmDialogVisible:ref(false),
            boxItems:null,
            mirrorData:null,
            instanceData:null,
            selectedDeltaTime:null,
        }
    },
    methods:{
        ref,
        verifyLogin(){
            verify().then(response=>{
                }).catch((error)=>{
                ElMessage.error(error.response.data.data)
                window.localStorage.removeItem("cloudToken")
                this.$router.push({name:'login'})
            })
        },
        fetchData() {
            readCurrentUserInfo(null).then(response=>{
                this.currentUserInfo=response.data.data
                console.log(this.currentUserInfo)
            }).catch((error)=>{
                // ElMessage.error(error.response.data.data)
                console.log(error.response.data.data)
            })
            activityCreate(null).then(response=>{
                this.boxItems=response.data.data
                console.log(this.boxItems)
            }).catch((error)=>{
                // ElMessage.error(error.response.data.data)
                console.log(error.response.data.data)
            })
            instanceRead(null).then(response=>{
                this.instanceData=response.data.data
                console.log(this.instanceData)
            }).catch((error)=>{
                // ElMessage.error(error.response.data.data)
                console.log(error.response.data.data)
            })
            mirrorRead(null).then(response=>{
                this.mirrorData=response.data.data
                console.log(this.mirrorData)
            }).catch((error)=>{
                // ElMessage.error(error.response.data.data)
                console.log(error.response.data.data)
            })
        },
        rechargeAccountCommand(amount){
            const data=new FormData
            data.append("amount",amount)
            rechargeAccount(data).then(response=>{
                ElMessage.success("充值成功！")
                this.fetchData()
            }).catch((error)=>{
                ElMessage.error("充值失败！")
                console.log(error.response.data.data)
            })
        },
        setSelectedDeltaTime(cloudInstanceId,deltaTime){
            this.renewConfirmDialogVisible=ref(true);
            const data=new FormData
            data.append("cloudInstanceId",cloudInstanceId)
            data.append("deltaTime",deltaTime)
            calculateRenew(data).then(response=>{
                this.operationCost=response.data.data
            }).catch((error)=>{
                console.log(error.response.data.data)
                ElMessage.success("询价失败！")
            })
            this.selectedDeltaTime=deltaTime;
        },
        renewInstanceCommand(cloudInstanceId,deltaTime){
            const data=new FormData
            data.append("cloudInstanceId",cloudInstanceId)
            data.append("deltaTime",deltaTime)
            renew(data).then(response=>{
                ElMessage.success("续期成功！")
                this.fetchData()
                this.renewConfirmDialogVisible=ref(false);
                this.renewDialogVisible=ref(false);
            }).catch((error)=>{
                ElMessage.error("续期失败！")
                console.log(error.response.data.data)
            })
        },
        refreshBox(){
            activityRefreshBox(null).then(response=>{
                this.boxItems=response.data.data
                console.log(this.boxItems)
                this.refreshBoxDialogVisible = ref(false)
                ElMessage.success("盲盒礼包重置成功！")
                this.fetchData()
            }).catch((error)=>{
                ElMessage.error(error.response.data.data)
                console.log(error.response.data.data)
            })
        },
        handleOpenBox(id){
            const data=new FormData()
            data.append("boxId",id)
            activityOpen(data).then(response=>{
                ElMessage.success(response.data.data)
                this.fetchData()
            }).catch((error)=>{
                ElMessage.error(error.response.data.data)
                console.log(error.response.data.data)
            })
        },
        handleInstanceCreate(id){
            this.resetInstanceFormData()
            this.instanceFormDialogVisible=ref(true)
            this.instanceForm.mirrorId=id
        },
        handleInstanceModify(row){
            this.resetInstanceFormData()
            this.instanceForm.selectedId=row.id
            this.instanceFormDialogVisible=ref(true)
            this.instanceForm.mirrorId=row.mirrorId
            this.instanceForm.instanceName=row.name
            this.instanceForm.cpu=row.cpu
            this.instanceForm.memory=row.memory
            this.instanceForm.storage=row.storage
            this.instanceForm.localIp=row.localIp
            this.instanceForm.bandwidth=row.bandwidth
        },
        handleInstanceDelete(id){
            const data=new FormData()
            data.append("id",id)
            instanceDelete(data).then(response=>{
                console.log(this.boxItems)
                ElMessage.success("删除成功！")
                this.fetchData()
            }).catch((error)=>{
                ElMessage.error(error.response.data.data)
            })
        },
        resetInstanceFormData(){
            this.instanceForm.selectedId=""
            this.instanceForm.mirrorId=""
            this.instanceForm.instanceName=""
            this.instanceForm.cpu=""
            this.instanceForm.memory=""
            this.instanceForm.storage=""
            this.instanceForm.localIp=""
            this.instanceForm.bandwidth=""
        },
        inqueryInstance(){
            if (this.instanceForm.cpu==""){
                ElMessage.error("CPU不能为空！")
                return;
            }
            if(this.instanceForm.memory==""){
                ElMessage.error("内存不能为空！")
                return;
            }
            if(this.instanceForm.storage==""){
                ElMessage.error("硬盘不能为空！")
                return;
            }
            if(this.instanceForm.bandwidth==""){
                ElMessage.error("带宽不能为空！")
                return;
            }
            this.instanceConfirmDialogVisible = ref(true)
            const data=new FormData()
            data.append("id",this.instanceForm.selectedId)
            data.append("mirrorId",this.instanceForm.mirrorId)
            data.append("name",this.instanceForm.instanceName)
            data.append("cpu",this.instanceForm.cpu)
            data.append("memory",this.instanceForm.memory)
            data.append("storage",this.instanceForm.storage)
            data.append("localIp",this.instanceForm.localIp)
            data.append("bandwidth",this.instanceForm.bandwidth)
            calculateUpgrade(data).then(response=>{
                this.operationCost=response.data.data
            }).catch((error)=>{
                ElMessage.error(error.response.data.data)
                console.log(error.response.data.data)
            })
        },
        submitInstanceForm(){
            this.instanceFormDialogVisible = ref(false)
            this.instanceConfirmDialogVisible = ref(false)
            const data=new FormData()
            data.append("id",this.instanceForm.selectedId)
            data.append("mirrorId",this.instanceForm.mirrorId)
            data.append("name",this.instanceForm.instanceName)
            data.append("cpu",this.instanceForm.cpu)
            data.append("memory",this.instanceForm.memory)
            data.append("storage",this.instanceForm.storage)
            data.append("localIp",this.instanceForm.localIp)
            data.append("bandwidth",this.instanceForm.bandwidth)
            upgrade(data).then(response=>{
                ElMessage.success("配置成功")
                this.fetchData()
            }).catch((error)=>{
                ElMessage.error(error.response.data.data)
                console.log(error.response.data.data)
            })
        }
    }
}

</script>

<style scoped>
.box-card {
    height: 200px;
    width: 200px;
    display: inline-block;
}
.container{
    height: 100%;
    text-align: center;
}

</style>